<template>
	<view>
		<view >
			<br />
			<text>轮播图</text>
			<br />
			<view class="content">
				<view class="images" v-for="(item,index) in images" :key="index">
					<image class="img" :src=item mode="aspectFill"></image>
					<view class="remove">x</view>
				</view>
				<view class="files" @click="addFiles(0,0)">
					<view class="add">+</view>
				</view>
				<button @click="uploadImage">点击</button>
			</view>
		</view>
		
		<view >
			<br />
			<text>书法动态</text>
			<br />
			<view class="content">
				<view class="images" v-for="(item,index) in images" :key="index">
					<image class="img" :src=item mode="aspectFill"></image>
					<view class="remove">x</view>
				</view>
				<view class="files" @click="addFiles(1,1)">
					<view class="add">+</view>
				</view>
				<button @click="uploadImage">点击</button>
			</view>
		</view>
		
		<view >
			<br />
			<text>书法作品</text>
			<br />
			<view class="content">
				<view class="images" v-for="(item,index) in images" :key="index">
					<image class="img" :src=item mode="aspectFill"></image>
					<view class="remove">x</view>
				</view>
				<view class="files" @click="addFiles(2,1)">
					<view class="add">+</view>
				</view>
				<button @click="uploadImage">点击</button>
			</view>
		</view>
		
		<view >
			<br />
			<text>书法视频</text>
			<br />
			<view class="content">
				<view class="images" v-for="(item,index) in images" :key="index">
					<image class="img" :src=item mode="aspectFill"></image>
					<view class="remove">x</view>
				</view>
				<view class="files" @click="addvideo(3,1)">
					<view class="add">+</view>
				</view>
				<button @click="uploadvideo">点击</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
     
		data() {
			return {
				title: 'Hello',
				images:[],
			}
		},
		onLoad() {
     

		},
		methods: {
			addFiles(imageType,classType){
				uni.chooseImage({
					count:4,
					sizeType: [ "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: res=>{
						this.images=[]
						console.log("选择图片:"+res.tempFilePaths)
						
						res.tempFilePaths.forEach((item,index)=>{
							console.log("开始上传:"+item)
							this.images.push(item)
							uni.uploadFile({
								url:'http://8.134.76.242:8080/common/uploadFile',
								filePath:item,	
								quality: 30,
								name:'file',
								formData: {
									imageType: imageType ,//0轮播 1动态 2 作品
									classType: classType //0其他 1书法 2 编程 3 画画 4积木
								},
								success:(res)=>{
									console.log(res.data)
								}
							})
						})
					}
				})
			},
			
			uploadImage(){
				console.log("开始上传:"+this.images)
				uni.uploadFile({
					url:'http://8.134.76.242:8080/common/uploadFile',
					filePath:this.images,	
					name:'file',
					success:(res)=>{
						console.log(res.data)
					}
				})
				
				// this.images.forEach((item,index) =>{
				// 	uni.uploadFile({
				// 		url:'http://localhost:8080/common/uploadFile',
				// 		file:item,
				// 		name:'file',
				// 		success:(res)=>{
				// 			console.log(res.data)
				// 		}
				// 	})
				// })
			},
			
			addvideo(imageType,classType){
				uni.chooseVideo({
					sizeType: [ "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: res=>{
						uni.showToast({
							title:res.tempFilePath
						})
						console.log("选择视频:"+res.tempFilePath)
						
						uni.uploadFile({
							url:'http://8.134.76.242:8080/api/common/uploadFile',
							filePath:res.tempFilePath,	
							quality: 30,
							name:'file',
							formData: {
								imageType: imageType ,//0轮播 1动态 2 作品 3 视频
								classType: classType //0其他 1书法 2 编程 3 画画 4积木
							},
							success:(res)=>{
								console.log(res.data)
							}
						})
					}
				})
			},
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
     
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;

		.files {
     
			width: 200rpx;
			height: 200rpx;
			background-color: #f7f7f7;
			color: #6d6d6d;
			font-size: 100rpx;
			font-weight: 100;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;
		}

		.images {
     
			width: 200rpx;
			height: 200rpx;
			margin: 10rpx;
			position: relative;

			.img {
     
				width: 100%;
				height: 100%;
			}

			.remove {
     
				width: 50rpx;
				height: 50rpx;
				background-color: #f7f7f7;
				position: absolute;
				top: -5rpx;
				right: -10rpx;
				text-align: center;
				opacity: .5;
				border-radius: 0 0 0 50rpx;
				color: #c5c5c5;
			}
		}
	}
</style>
